<template>
	<view class='page-container'>
		<CheckBranchVue></CheckBranchVue>
		<DropDownSelect :drop-dwon-select-list="dropDwonSelectList" @selection-changed="handleSelectionChange">
		</DropDownSelect>
		<view class="card-container">
			<PhysicalExaminationCard v-for="(setMealInfo, idx) in filteredSetMealInfoList" :set-meal-info="setMealInfo"
				:key="idx"></PhysicalExaminationCard>
		</view>
	</view>
</template>

<script>
	import CheckBranchVue from '@/components/checkBranch/checkBranch.vue'
	import DropDownSelect from '../../../components/DropDownSlect/DropDownSelect.vue';
	import PhysicalExaminationCard from '../../../components/PhysicalExaminationCard/PhysicalExaminationCard.vue';
	import {
		physicalSelect,
		physicalAdd
	} from '../../../api/physical';
	export default {
		components: {
			CheckBranchVue,
			DropDownSelect,
			PhysicalExaminationCard,
		},
		data() {
			return {
				dropDwonSelectList: [{
						title: '性别',
						selectValue: [],
						options: [{
								label: '男',
								value: 'man'
							},
							{
								label: '女 未婚',
								value: 'womanUnmarried'
							},
							{
								label: '女 已婚',
								value: 'womanMarried'
							},
						]
					},
					{
						title: '价格',
						selectValue: [],
						options: [{
								label: '由低到高',
								value: 'asc'
							},
							{
								label: '由高到低',
								value: 'desc'
							},
						]
					},
					{
						title: '类型',
						selectValue: [],
						options: [{
								label: '入职体检',
								value: 'onBoard'
							},
							{
								label: '驾照体检',
								value: 'license'
							},
							{
								label: '婚孕体检',
								value: 'marry&pregnancy'
							},
							{
								label: '少儿体检',
								value: 'child'
							},
							{
								label: '青少年体检',
								value: 'juvenile'
							},
							{
								label: '青年体检',
								value: 'youth'
							},
							{
								label: '中年体检',
								value: 'midlife'
							},
							{
								label: '老年体检',
								value: 'old'
							},
						]
					},
					{
						title: '部位',
						selectValue: [],
						options: [{
								label: '头部',
								value: 'head'
							},
							{
								label: '胸部',
								value: 'chest'
							},
							{
								label: '腹部',
								value: 'abdomen'
							},
							{
								label: '骨/关节',
								value: 'bone/joint'
							},
							{
								label: '血液',
								value: 'blood'
							},
							{
								label: '其他',
								value: 'other'
							},
						]
					},
				],
				originalSetMealInfoList: [{
						imgPath: '',
						title: '一般体检',
						label: ['男', '入职体检', '头部'],
						price: 1000,
					},
					{
						imgPath: '',
						title: '一般体检',
						label: ['男', '入职体检', '头部'],
						price: 1000,
					}
				],
				filteredSetMealInfoList: [],
				currentFilters: {
					gender: [],
					price: [],
					type: [],
					place: []
				}
			}
		},
		created() {
			this.filteredSetMealInfoList = [...this.originalSetMealInfoList];
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				physicalAdd({
					name: "啊啊啊",
					status: 1
				}).then(res => {
					physicalSelect({
						status: 1
					}).then(res => {
						console.log(res)
						this.dropDwonSelectList = res;
					})
				})

			},
			// 将value转换为对应的label
			convertValuesToLabels(values, options) {
				return values.map(value => {
					const option = options.find(opt => opt.value === value);
					return option ? option.label : value;
				});
			},

			handleSelectionChange(selections) {
				this.currentFilters = {
					gender: this.convertValuesToLabels(
						this.dropDwonSelectList[0].selectValue,
						this.dropDwonSelectList[0].options
					),
					price: this.dropDwonSelectList[1].selectValue,
					type: this.convertValuesToLabels(
						this.dropDwonSelectList[2].selectValue,
						this.dropDwonSelectList[2].options
					),
					place: this.convertValuesToLabels(
						this.dropDwonSelectList[3].selectValue,
						this.dropDwonSelectList[3].options
					),
				};

				this.applyFilters();
			},

			applyFilters() {
				let filtered = [...this.originalSetMealInfoList];

				// 性别筛选
				if (this.currentFilters.gender.length > 0) {
					filtered = filtered.filter(item =>
						this.currentFilters.gender.some(genderLabel =>
							item.label.includes(genderLabel)
						)
					);
				}

				// 类型筛选
				if (this.currentFilters.type.length > 0) {
					filtered = filtered.filter(item =>
						this.currentFilters.type.some(typeLabel =>
							item.label.includes(typeLabel)
						)
					);
				}

				// 部位筛选
				if (this.currentFilters.place.length > 0) {
					filtered = filtered.filter(item =>
						this.currentFilters.place.some(placeLabel =>
							item.label.includes(placeLabel)
						)
					);
				}

				// 价格排序
				if (this.currentFilters.price.length > 0) {
					const sortOrder = this.currentFilters.price[0];
					filtered.sort((a, b) => {
						return sortOrder === 'asc' ? a.price - b.price : b.price - a.price;
					});
				}

				this.filteredSetMealInfoList = filtered;
			}
		}
	}
</script>

<style lang='scss' scoped>
	.page-container {
		background: linear-gradient(#e0f3ff 0%, #fff 50%);
		min-height: 100vh;
		padding: 20rpx;
	}
</style>